<!--首页统计-->
<template>
  <div class="app-container">
    <!-- 未查询到黑号弹窗 -->
    <div class="bg-color" v-if="noblacknum">
      <div class="box">
        <div class="icons" @click="noblacknum=false"><img src="../assets/images/close.png"/></div>
        <div class="queren"><img src="../assets/images/queren.png"/></div>
        <div class="texts">未查询到黑名单记录，可交易！</div>
        <button class="qrbtn" @click="noblacknum=false">确定</button>
      </div>
    </div>
    <!-- 黑号记录弹窗 -->
    <div class="bg-color" v-if="blacknum">
      <table class="tables">
        <tr class="titles"><p class="txts">黑号记录</p></tr>
        <tr class="title">
          <td>排序</td>
          <td>游戏品类</td>
          <td>游戏账号</td>
          <td>姓名</td>
          <td>手机号</td>
          <td>身份证号</td>
          <td>拉黑原因</td>
          <td>拉黑时间</td>
        </tr>
        <tr v-for=" (itme,indx) in ListBase" :key=indx>
          <td>{{ itme.id }}</td>
          <td>{{ itme.phoneNumber }}</td>
          <td>{{ itme.gmAccount }}</td>
          <td>{{ itme.name }}</td>
          <td>{{ itme.phoneNumber }}</td>
          <td>{{ itme.idCard }}</td>
          <td>{{ itme.information }}</td>
          <td>{{ itme.createTime }}</td>
        </tr>
        <tr>
          <td colspan="8">
            <button class="confirm" @click="blacknum=false">确认</button>
          </td>
          <!-- <button class="confirm">确认</button> -->
        </tr>
      </table>
    </div>

    <!-- 添加黑号弹窗 -->
    <el-dialog title="新增黑名单" :visible.sync="addblacknum" width="550px" append-to-body
               :close-on-click-modal="false">
      <el-form :model="Black" inline label-width="80px" ref="BlackForm">
        <el-row>
          <el-col :span="24">
            <el-form-item label="游戏名称" prop="gmName"
                          :rules="{required:true ,message:'游戏名称不能为空',trigger:'blur'}">
              <el-input v-model="Black.gmName" type="text" placeholder="请输入游戏名称" style="width: 400px"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="游戏账号" prop="gmAccount"
                          :rules="{required:true ,message:'游戏账号不能为空',trigger:'blur'}">
              <el-input v-model="Black.gmAccount" type="text" placeholder="请输入游戏账号" style="width: 400px"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="手机号" prop="name" :rules="{required:true ,message:'手机号不能为空',trigger:'blur'}">
              <el-input v-model="Black.phoneNumber" type="text" placeholder="请输入手机号" style="width: 400px"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="身份证号" prop="idCard"
                          :rules="{required:true ,message:'身份证号不能为空',trigger:'blur'}">
              <el-input v-model="Black.idCard" type="text" placeholder="请输入身份证号" style="width: 400px"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="姓名" prop="name" :rules="{required:true ,message:'姓名不能为空',trigger:'blur'}">
              <el-input v-model="Black.name" type="text" placeholder="请输入姓名" style="width: 400px"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="拉黑信息" prop="phoneNumber">
              <el-input v-model="Black.information" type="text" placeholder="请输入拉黑信息" style="width: 400px"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="Black.remarks" type="text" placeholder="请输入备注" style="width: 400px"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addblacknum = false">取 消</el-button>
        <el-button type="primary" @click="addBlack">确 定</el-button>
      </div>
    </el-dialog>

    <!--第一行-->
    <div class="card">
      <p>交易大数据</p>
      <div class="row">
        <div class="col">
          <div class="wrap dingdanshuliang">
            <img src="../assets/home/dingdanshuliang.png" alt="">
            <div class="count">
              <div
                class="count-num">{{ topeInt || 0 }}
              </div>
              <div class="count-txt">订单总数</div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="wrap dingdanjine">
            <img src="../assets/home/dingdanjine.png" alt="">
            <div class="count">
              <div
                class="count-num">
                {{ (distributionOfSalesChannels.salesData && distributionOfSalesChannels.salesData.singular) || 0 }}
              </div>
              <div class="count-txt">销售单量</div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="wrap dingdanxiaoshou">
            <img src="../assets/home/dingdanxiaoliang.png" alt="">
            <div class="count">
              <div class="count-num">
                {{ (distributionOfSalesChannels.salesData && distributionOfSalesChannels.salesData.bigDecimal) || 0 }}
              </div>
              <div class="count-txt">销售金额</div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="wrap huishoudanliang">
            <img src="../assets/home/huishoudanliang.png" alt="">
            <div class="count">
              <div
                class="count-num">
                {{ (accountSource.totalNumberAndAmount && accountSource.totalNumberAndAmount.singular) || 0 }}
              </div>
              <div class="count-txt">回收单量</div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="wrap huishoujine">
            <img src="../assets/home/huishoujine.png" alt="">
            <div class="count">
              <div
                class="count-num">
                {{ (accountSource.totalNumberAndAmount && accountSource.totalNumberAndAmount.bigDecimal) || 0 }}
              </div>
              <div class="count-txt">回收金额</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--第二行 游戏品类-->
    <div class="game">
      <div class="game-item" style="height: 239px;">
        <div class="game-item-l">
          <div class="game-item-l-title">
            <p>交易游戏品类回收</p>
            <el-popover placement="top-start" trigger="hover">
              <!--弹框内容-->
              <div style="padding: 10px;max-height: 200px;overflow-y: auto;">
                <el-row>
                  <el-col :span="24">
                    <div class="game-item-l-con-record" v-for="(item,indx) in recyclingDataGame">
                      <div class="l-item-name">
                        <span class="block" :style="parseColor(indx)"/> <span
                        class="name">{{ item.gameName }}-{{ item.singular || 0 }}单</span>
                      </div>
                      <div class="price">
                        回收(元){{ item.bigDecimal || 0 }}
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>

              <el-icon slot="reference" class="el-icon-warning"
                       style="margin-left: 8px; font-size: 18px;color:#C4CAD4;"></el-icon>
            </el-popover>
          </div>
          <div class="game-item-l-con">
            <div class="game-item-l-con-record" v-if="indx <= 4" v-for="(item,indx) in recyclingDataGame">
              <div class="l-item-name">
                <span class="block" :style="parseColor(indx)"/> <span
                class="name">{{ item.gameName }}-{{ item.singular || 0 }}单</span>
              </div>
              <div class="price">
                回收(元){{ item.bigDecimal || 0 }}
              </div>
            </div>
          </div>
        </div>
        <div class="game-item-r">
          <div class="desc" v-if="recyclingDataGame.length > 0">交易游戏<br>品类回收</div>
          <circleEcharts id="1" v-if="recyclingDataGame.length > 0" :data="recyclingDataGame"></circleEcharts>
        </div>
      </div>

      <div class="game-item" style="height: 239px;">
        <div class="game-item-l">
          <div class="game-item-l-title">
            <p>交易游戏品类销售</p>
            <el-popover placement="top-start" trigger="hover">
              <!--弹框内容-->
              <div style="padding: 10px;max-height: 200px;overflow-y: auto;">
                <el-row>
                  <el-col :span="24">
                    <div class="game-item-l-con-record" v-for="(item,indx) in salesDataGameDashboard">
                      <div class="l-item-name">
                        <span class="block" :style="parseColor(indx)"/> <span
                        class="name">{{ item.gameName }}-{{ item.singular || 0 }}单</span>
                      </div>
                      <div class="price">
                        回收(元){{ item.bigDecimal || 0 }}
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <el-icon slot="reference" class="el-icon-warning"
                       style="margin-left: 8px; font-size: 18px;color:#C4CAD4;"></el-icon>
            </el-popover>
          </div>
          <div class="game-item-l-con">
            <div class="game-item-l-con-record" v-if="indx <= 4" v-for="(item,indx) in salesDataGameDashboard"
                 :key="indx">
              <div class="l-item-name">
                <span class="block" :style="parseColor(indx)"/> <span
                class="name">{{ item.gameName }}-{{ item.singular || 0 }}单</span>
              </div>
              <div class="price">
                回收(元){{ item.bigDecimal || 0 }}
              </div>
            </div>
          </div>
        </div>
        <div class="game-item-r">
          <div class="desc" v-if="salesDataGameDashboard.length > 0">交易游戏<br>品类销售</div>
          <circleEcharts id="2" v-if="salesDataGameDashboard.length > 0" :data="salesDataGameDashboard"></circleEcharts>
        </div>
      </div>
    </div>

    <!--第三行-->
    <div class="flex-warp">
      <div class="card" id="cards" style="background-color: #fff;">
        <p>今日交易订单</p>
        <div class="row">
          <!-- <div class="col">
            <div class="wrap">
              <img class="b1" src="../assets/home/jinriyichangyichuli.png" alt="">
              <div class="count">
                <div class="count-num">{{abnormalInformation && abnormalInformation.exceptionProcessedToday || 0}}</div>
                <div class="count-txt">今日异常已处理</div>
              </div>
            </div>
          </div> -->
          <div class="col">
            <div class="wrap">
              <img class="b2" src="../assets/home/weishouzhaohui.png" alt="">
              <div class="count">
                <div class="count-num">{{ abnormalInformation && abnormalInformation.abnormalRetrievalInt || 0 }}</div>
                <div class="count-txt">未售找回</div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="wrap">
              <img class="b3" src="../assets/home/yishouzhaohui.png" alt="">
              <div class="count">
                <div class="count-num">{{ abnormalInformation && abnormalInformation.discoveredInt || 0 }}</div>
                <div class="count-txt">已售找回</div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="wrap">
              <img class="b4" src="../assets/home/weishouyichang.png" alt="">
              <div class="count">
                <div class="count-num">{{ abnormalInformation && abnormalInformation.abnormalSalesCInt || 0 }}</div>
                <div class="count-txt">未售异常</div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="wrap">
              <img class="b5" src="../assets/home/yishouyichang.png" alt="">
              <div class="count">
                <div class="count-num">{{ abnormalInformation && abnormalInformation.abnormalsalesInt || 0 }}</div>
                <div class="count-txt">已售异常</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 黑号 -->
      <div class="black-num" style="background-color: #fff;">
        <div class="black-warp">
          <p class="txt">黑号查询</p>
          <div class="el-icon-plus" @click="showaddblacknum()"></div>
        </div>
        <el-input
          placeholder="请输入账号/实名/手机号"
          v-model="texts"
          suffix-icon="el-icon-search"
          clearable>
        </el-input>
        <el-button type="text" @click="getBlackPhone()">一键查询</el-button>
      </div>
    </div>

    <!--第四行-->
    <div class="game">
      <div class="game-item game-item4">
        <div class="game-item-l-title">
          <p>近7日库存走势</p>
        </div>
        <div class="game-item-con">
          <lineAndBarEchart v-if="Sevendayinventorypl.length > 0" :data="Sevendayinventorypl"/>
        </div>
      </div>

      <div class="game-item game-item4">
        <div class="game-item-l-title" style="margin-bottom: 20px;">
          <p>今日财务支出和收入</p>
        </div>
        <div class="game-item-con" style=" display: flex;justify-content: space-around;">
          <div class="game-item-con-item">
            <span class="item-title">今日财务支出（元）</span> <span
            class="item-money">{{ financial.expenditure || 0 }}</span>
            <div class="item-compare">
              <span class="item-compare-yestoday">对比昨日</span> <span
              class="item-compare-num">{{ financial.percentag || 0 }}%</span>
            </div>
          </div>
          <div class="game-item-con-item yellow-bg">
            <span class="item-title">今日财务收入（元）</span> <span class="item-money">{{ financial.income || 0 }}</span>
            <div class="item-compare">
              <span class="item-compare-yestoday">对比昨日</span> <span
              class="item-compare-num">{{ financial.incomepercentag || 0 }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//过渡动画

import {
  getAllSalesDataApi,
  getInventoryOverviewApi,
  getcurrentAccountstatus,
  getSalesDataDashboard,
  getLogLogPlot,
  gettfinancia,
  addBlack,
  getBlackPhone
} from '@/api/business/home.js'
import overView from '../components/InexUseCom/overView.vue';
import circleEcharts from "./components/circleEchart";
import lineAndBarEchart from "./components/lineAndBarEchart";
import { colorArr} from "@/utils/color";

export default {
  components: {overView, circleEcharts, lineAndBarEchart},
  data() {
    return {
      //状态数据
      TodayCount: '',
      status: {},
      colors: [
        {color: '#563BFF', percentage: 20},
      ],
      colors1: [
        {color: '#FF7049', percentage: 20},
      ],
      colors2: [
        {color: '#499DFF', percentage: 20},
      ],
      colors3: [
        {color: '#8C35FF', percentage: 20},
      ],
      Black: {
        gmAccount: '',//游戏账号
        phoneNumber: '',//手机号
        idCard: '',//身份证
        name: '',//姓名
        information: '',//拉黑信息
        remarks: '',//备注
        gmName: '',//游戏名称
      },//添加信息类
      labelPosition: 'right',
      // formLabelAlign: {
      //   name: '',
      //   region: '',
      //   type: ''
      // },
      ListBase: [], //查询返回黑号数据
      from: {},
      topeInt: '',//订单总数
      abnormalInformation: {},//实时账号数据
      recyclingDataGame: [],//回收数据看板
      accountSource: {},//回收数据 账号来源分布
      distributionOfSalesChannels: {},//销售数据，销售渠道分布
      salesDataGameDashboard: [],//销售数据看板
      Sevendayinventorypl: [],//近七日库存动态
      financial: {},//财务信息
      blacknum: false,//黑号记录弹窗状态
      noblacknum: false,//无黑号记录弹窗
      addblacknum: false,//黑号添加弹窗
      texts: '',//黑号查询输入框
      blacknumid: '',
    }
  },

  methods: {
    //黑号查询弹窗
    getBlackPhone() {
      getBlackPhone(this.texts).then(response => {
        if (response.code === 200) {
          if (response.data.length > 0) {
            this.blacknum = true,
              this.ListBase = response.data
          } else if (response.data.length == 0 || response.data.length == null) {
            this.noblacknum = true;
          }
        }
      })
    },
    //     checkblacknum(){
    //     const textslist=['123','111','222'];
    //     if(textslist.includes(this.texts)){
    //       this.blacknum=true;
    //     }else{
    //       this.noblacknum=true;
    //     }
    //  },
    //添加黑号弹窗
    showaddblacknum() {
      this.addblacknum = true;
      this.Black = {};
    },

    /** 添加黑号*/
    addBlack() {
      this.$refs.BlackForm.validate((valid) => {
        if (valid) {
          addBlack(this.Black).then(response => {
            this.$message.success("添加成功！");
            this.addblacknum = false;
          }).catch(()=>{
            this.addblacknum = false;
          })
        }
      })
    },

    // 颜色块
    parseColor(indx) {
      return  "background-color:" + colorArr[indx].startColor;
    },

    getData() {
      // getAllSalesDataApi().then(response => {
      //     this.from = response.data
      // })
      //
      // getInventoryOverviewApi().then(response => {
      //     console.log(response);
      // })

      // 七日动态
      getLogLogPlot().then(res => {
        // abnormalBigDecimal 库存金额
        // singular 库存数量
        // abnormaInt回收库存号
        // bigDecimal  回收库存号金额
        this.Sevendayinventorypl = res.data.Sevendayinventorypl;//回收和动态
        // this.Sevendaysalesdata =  res.data.Sevendaysalesdata;//七日销售数据
      })


      getSalesDataDashboard().then(res => {
        let {
          salesDataGameDashboard,
          recyclingDataGame,
          accountSource,
          distributionOfSalesChannels,
          ProfitFromSingleProductSales,
          topeInt
        } = res.data;

        //回收数据
        this.accountSource = accountSource;

        //回收数据看板
        this.recyclingDataGame = recyclingDataGame;
        //销售数据看板
        this.salesDataGameDashboard = salesDataGameDashboard;
        //销售数据，销售渠道分布
        this.distributionOfSalesChannels = distributionOfSalesChannels;
        //单品销售利润
        //this.ProfitFromSingleProductSales = ProfitFromSingleProductSales;
        this.topeInt = topeInt;
      })

      // 实时账号
      getcurrentAccountstatus().then(res => {
        this.abnormalInformation = res.data.abnormalInformation;
      });

      gettfinancia().then(res => {
        this.financial = res.data;
      })
    }
  },
  created() {
    this.getData();
  }
}
</script>

<style lang="scss" scoped>

@function vw($width) {
  @return ($width * 100vw / 1920);
}

@function vh($height) {
  @return ($height * 100vh / 1080);
}

.app-container {
  background-color: #EDEFF9;
  padding: 30px;

  p {
    position: relative;
    margin: 0;
    font-family: Source Han Sans;
    display: inline-block;
    font-size: vh(18);
    font-weight: 600;
    line-height: normal;
    font-feature-settings: "kern" on;
    color: #3D3D3D;
    margin: 0 0 vh(18) vw(8);

    &::before {
      content: "";
      display: inline-block;
      position: absolute;
      top: 50%;
      left: vw(-8);
      transform: translateY(-50%);
      width: vw(3);
      height: vh(16);
      background-color: #116BFF;
      border-radius: 2px;
    }
  }

  .flex-warp {
    display: flex;
    justify-content: space-between;

    .black-num {
      width: 18%;
      padding: vh(20) vw(20) vh(20) vw(20);
      background-color: #fff;
      border-radius: 16px;
      margin-bottom: vh(20);

      //添加黑号
      .black-warp {
        display: flex;
        justify-content: space-between;

        div {
          width: 25px;
          height: 25px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .txt {
        font-size: vh(18);
      }

      ::v-deep .el-input {
        margin-bottom: 30px;

        .el-input__inner {
          border-radius: 20px;
          height: vh(48);
          background: rgba(211, 220, 234, 0.24);

          &::-webkit-input-placeholder {
            color: #C4CAD4;
            font-size: 14px;
          }
        }
      }

      ::v-deep.el-input__suffix {
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: vh(20);
        color: #C4CAD4;
      }

      button {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 38px;
        background-color: #116BFF;
        color: white;
        border-radius: 10px;
      }
    }
  }

  #cards {
    width: 80%;
  }

  .card {
    padding: vh(20) vw(20) vh(20) vw(20);
    background-color: #fff;
    border-radius: 16px;
    margin-bottom: vh(20);

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // width: 50%;

      .col {
        flex: 1;
        background-color: #F6F7FA;
        border-radius: 16px;

        &:not(:last-child) {
          margin-right: vw(20);
        }

        .wrap {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          height: vh(103);
          padding-left: 12%;
          width: 100%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          overflow: hidden;

          img {
            width: vh(78);
            height: vh(78);
            margin-right: 10%;
            border-radius: 14px;
          }

          .b1 {
            box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
          }

          .b2 {
            box-shadow: 0px 8px 13px 0px rgba(163, 187, 226, 0.19);
          }

          .b3 {
            box-shadow: 0px 11px 28px -2px rgba(175, 70, 54, 0.33);
          }

          .b4 {
            box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
          }

          .b5 {
            box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
          }

          .count {
            .count-num {
              font-family: HarmonyOS Sans SC;
              font-size: vh(24);
              font-weight: 900;
              line-height: normal;
              font-feature-settings: "kern" on;
              color: #3D3D3D;
              margin-bottom: vh(16);
            }

            // .count-num:hover{
            //   font-size: vh(40);
            //   transform: rotate(360deg);
            //   transition: all .8s ease;
            // }

            .count-txt {
              font-family: Source Han Sans SC;
              font-size: vh(12);
              color: #3D3D3D;
            }
          }

          //  .count:hover{
          //     font-size: 50px;
          //     transform: rotate(360deg);
          //     transition: all .8s ease;
          //   }
        }

        .dingdanshuliang {
          background-image: url("../assets/home/dingdanshuliang_bg.png");

          img {
            box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
          }
        }

        .dingdanjine {
          background-image: url("../assets/home/dingdanjine_bg.png");

          img {
            box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
          }
        }

        .dingdanxiaoshou {
          background-image: url("../assets/home/dingdanxiaoshou_bg.png");

          img {
            box-shadow: 0px 11px 28px -2px rgba(175, 116, 54, 0.33);
          }
        }

        .huishoudanliang {
          background-image: url("../assets/home/huishoudanliang_bg.png");

          img {
            box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
          }
        }

        .huishoujine {
          background-image: url("../assets/home/huishoujine_bg.png");

          img {
            box-shadow: 0px 11px 28px -2px rgba(175, 70, 54, 0.33);
          }
        }
      }
    }
  }

  .game {
    display: flex;
    width: 100%;
    margin-bottom: vh(20);

    .game-item {
      display: flex;
      width: 50%;
      background-color: #fff;
      border-radius: 16px;

      &:nth-child(1) {
        margin-right: vw(30);
      }

      .game-item-l {
        width: 55%;
        padding: vh(20) 0 0 vw(20);

        .game-item-l-title {
          p {
            font-family: Source Han Sans;
            font-size: 18px;
            font-weight: 500;
            line-height: normal;
            font-feature-settings: "kern" on;
            color: #3D3D3D;
          }
        }

        .game-item-l-con {
          overflow: auto;

          &::-webkit-scrollbar {
            display: none;
            width: 0;
          }
        }
      }

      .game-item-con {
        height: vh(300);

        .game-item-con-item {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: vw(300);
          height: vh(250);
          border-radius: 21px;
          box-sizing: border-box;
          border: 1px solid #D0DAFE;
          background-image: linear-gradient(45deg, #D2DBFE 10%, #fff 50%, #fff 50%, #D2DBFE 100%);

          .item-title {
            width: vw(144);
            height: vh(23);
            font-family: Source Han Sans;
            font-size: vh(16);
            font-feature-settings: "kern" on;
            color: #3D3D3D;
            margin-bottom: vh(10);
          }

          .item-money {
            font-family: HarmonyOS Sans SC;
            font-size: vh(30);
            font-weight: 900;
            font-feature-settings: "kern" on;
            color: #3D3D3D;
            margin-bottom: vh(20);
          }

          .item-compare {
            .item-compare-yestoday {
              font-family: Source Han Sans;
              font-size: vh(16);
              font-feature-settings: "kern" on;
              color: #3D3D3D;
            }

            .item-compare-num {
              font-family: Source Han Sans;
              font-size: vh(16);
              font-feature-settings: "kern" on;
              color: #3D3D3D;
            }
          }
        }

        .yellow-bg {
          box-sizing: border-box;
          border: 1px solid #FCE9D7;
          background-image: linear-gradient(45deg, #FDE6D2 10%, #fff 50%, #fff 50%, #FDE6D2 100%);
        }
      }

      .game-item-r {
        position: relative;
        width: 45%;
        overflow: hidden;

        .desc {
          position: absolute;
          top: 50%;
          left:50%;
          transform: translate(-50%,-50%);
          z-index:99;
          font-size: 15px;
          font-weight: 600;
          color: #96A7C2;
        }
      }
    }

    .game-item4 {
      display: block;
      padding: vh(20) vw(20);
    }
  }
}

.game-item-l-con-record {
  display: flex;
  background: rgba(196, 202, 212, 0.14);
  height: 25px;
  line-height: 25px;
  padding-left: vw(30);

  &:not(:nth-last-child(1)) {
    margin-bottom: 8px;
  }

  .l-item-name {
    width: vw(210);
    display: flex;
    align-items: center;

    .block {
      width: 16px;
      height: 10px;
      border-radius: 4px;
      background-color: #00afff;
      margin-right: vw(6);
    }

    .name {
      width: 80%;
      font-feature-settings: "kern" on;
      color: #333;
      font-family: 思源黑体;
      font-size: vh(12);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .price {
    width: vw(170);
    font-feature-settings: "kern" on;
    color: #333;
    font-family: 思源黑体;
    font-size: vh(12);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 黑号记录样式
.bg-color {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  width: 100%;
  height: 100%;

  .el-form el-form--label-right {
    width: 500px;
  }

  //添加黑号
  .addfroms {
    width: 450px;
    padding: 30px 30px;
    background-color: white;
    box-shadow: 3px 3px 3px #3D3D3D;
    margin: 15% auto;
    border-radius: 25px;

    P {
      font-size: 18px;
    }

    .addforms-warp {
      display: flex;
      justify-content: space-around;
      height: 50px;
      line-height: 50px;
      margin-top: 10px;

      div {
        width: 25%;
      }
    }

    span {
      color: #116BFF;
    }

    input {
      width: 250px;
      padding: 8px 8px;
      margin-top: 10px;
      margin-right: 30px;
      border-radius: 10px;
      border: 1px solid gainsboro;
    }

    button {
      padding: 10px 40px;
      margin-top: 30px;
      margin-left: 15%;
      color: white;
      border-radius: 10px;
      border: none;
    }

    .closes {
      background-color: lightblue;
    }

    .qd {
      background-color: #116BFF;
    }
  }
}

//未查询到黑号记录弹窗样式
.box {
  background-color: white;
  width: 300px;
  margin: 20% auto;
  padding: 15px 2px;
  border-radius: 15px;
  text-align: center;

  .icons {
    width: 20px;
    height: 20px;
    margin-left: 265px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .texts {
    padding: 20px 0px;
    font-size: 14px;
  }

  .qrbtn {
    padding: 5px 25px;
    letter-spacing: 2px;
    border-radius: 5px;
    border: none;
    background-color: #116BFF;
    color: white;
  }
}

//查询到黑号记录弹窗样式
.tables {
  background-color: white;
  border-collapse: collapse;
  // border: 1px solid black;
  margin: 10% auto;
  padding: 30px 0px;
  text-align: center;
  border-radius: 20px;
  box-shadow: 3px 3px 5px gray;

  tr {
    td {
      border: 1px solid #E2E6F5;
      padding: 10px 50px;
    }
  }

  tr:nth-child(even) {
    background-color: #F8FAFE;
  }

  .titles {

    .txts {
      font-size: 18px;
      margin-top: 20px;
    }
  }

  .title {
    td {
      background-color: #116BFF;
      color: white;
      padding: 10px 50px;
      letter-spacing: 2px;
    }
  }

  .confirm {
    margin-top: 20px;
    margin-bottom: 20px;
    // margin-left: 800px;
    padding: 10px 30px;
    border-radius: 10px;
    border: none;
    background-color: #116BFF;
    color: white;
    letter-spacing: 2px;
  }
}


::v-deep .el-dialog {
  border-radius: 30px;
}
</style>
